<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath()); //teacher_science_system/
    %>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <title>教师</title>
</head>

<jsp:include page="teacher_header.jsp"/>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>查看会议</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="show_meeting_table">
                <thead>
                <tr>
                    <th>操作</th>
                    <th>会议ID</th>
                    <th>会议名称</th>
                    <th>会议地点</th>
                    <th>会议主持人</th>
                    <th>会议内容</th>
                    <th>会议开始时间</th>
                    <th>会议结束时间</th>
                    <th>参与教师</th>
                </tr>
                </thead>

                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(function () {
        showMeeting();
    });

    function showMeeting() {
        $.ajax({
            url: "${APP_PATH}" + "/show_meeting",
            type: "GET",
            success: function (result) {
                build_sub_meeting(result);
            },
            error: function () {
                alert("抱歉，请求失败，请重新发出请求！")
            }
        });
    }

    function build_sub_meeting(result) {
        //清空table表格
        $("#show_meeting_table tbody").empty();
        var emps = result.data;

        //在每一行中
        $.each(emps, function (index, item) {
            var m_id = $("<td></td>").append(item.meetingid);
            var m_name = $("<td></td>").append(item.meetingname);
            var m_position = $("<td></td>").append(item.meetingposition);
            var m_host = $("<td></td>").append(item.meetinghost);
            var m_content = $("<td></td>").append(item.meetingcontent);
            var m_begin = $("<td></td>").append(item.begintime);
            var m_end = $("<td></td>").append(item.endtime);
            var view = $("<button style='margin: 0px'></button>").addClass("btn btn-info btn-sm inMeetingBtn")
                .append($("<span></span>").addClass("glyphicon glyphicon-calendar\n").append("加入")
                )
            var showBtn = $("<button style='margin: 0px'></button>").addClass("btn btn-info btn-sm  showBtn")
                .append($("<span></span>").addClass("glyphicon\n").append("查看")
                )

            showBtn.attr("id", item.meetingid)
            view.attr("id", item.meetingid); //给view btn附上相应ID值 后台需要该值

            $("<tr></tr>")
                .append($("<td></td>").append(view))
                .append(m_id)
                .append(m_name)
                .append(m_position)
                .append(m_host)
                .append(m_content)
                .append(m_begin)
                .append(m_end)
                .append($("<td></td>").append(showBtn))
                //怎么在这里 添加后台传来的不止一个的JSON数据
                .appendTo("#show_meeting_table tbody");
        });
    }

    //修改该教师的会议ID
    $(document).on("click", ".showBtn", function () {
        show($(this).attr("id"));
    });

    function show(meetingid) {
        $.ajax({
            url: "${APP_PATH}" + "/getTeacherNameById",
            data: {"meetingid": meetingid},
            type: "GET",
            dataType: "JSON",
            success: function (result) {
                //后台的回调函数中 result中可以找到 后台返回的JSON数据
                var _data = result.data
                if (_data.length == 0) {
                    alert("该会议无人参加")
                    return;
                }
                var arr = new Array();
                $.each(_data, function (index, item) {
                    arr.push(item.teachername)
                })
                alert(arr)
            },
            error: function () {
                alert("抱歉，请求失败，请重新发出请求！")
            }
        });
    }

    function view_check(meetingId, road) {
        $.ajax({
            url: "${APP_PATH}" + road,
            data: {"meetingId": meetingId},
            type: "GET",
            dataType: "JSON",
            success: function (result) {
                alert(result.message)
            }
        });
    }

    $(document).on("click", ".inMeetingBtn", function () {
        view_check($(this).attr("id"), "/updateMeeting");
    });
</script>
</body>
</html>
